<template>
  <div class="news-list">
    <div class="main" v-for="item in list" :key="item.id">
      <h1>{{ item.title }}</h1>
      <div class="info">{{ item.name }} &nbsp;&nbsp;{{ item.time }}</div>
      <div v-html="item.context"></div>
      <hr />
    </div>
    <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">
      <span slot="no-more"> 当前木有数据了 :( </span>
    </infinite-loading>
  </div>
</template>
<script>
import Bottom from "@/components/Bottom";
import InfiniteLoading from "vue-infinite-loading";
import { informationList } from "@/api/userApi";
export default {
  components: {
    Bottom,
    InfiniteLoading,
  },
  data() {
    return {
      count: 10,
      loading: false,
      aaaa: { pageNum: 1, pageSize: 6 },
      pages: 1,
      currentPage: 1,
      list: [],
      page: 1,
      hasNext: true,
    };
  },
  methods: {
    onInfinite($state) {
      this.loadInfoList($state);
      this.page += 1;
    },
    infiniteHandler($state) {
      setTimeout(() => {
        const temp = [];
        for (let i = this.list.length + 1; i <= this.list.length + 3; i++) {
          temp.push(i);
        }
        this.list = this.list.concat(temp);
        $state.loaded();
      }, 1000);
    },
    load() {
      this.count += 2;
    },
    loadInfoList($state) {
      informationList(this.page).then((res) => {
        if (res.code == 0) {
          this.list = this.list.concat(res.data.data);
          this.hasNext = res.data.hasNext;
           $state.loaded();
          if (!this.hasNext) {
            $state.complete();
          }
        } else {
          this.$message.error(res.message);
          $state.complete();
        }
      });
    },
  },
  mounted() {
    if (this.userInfo != null) {
      this.$store.commit("setNavStatus", 3);
    } else {
      this.$store.commit("setNavStatus", 2);
    }
    // this.loadInfoList()
  },
  computed: {
    userInfo() {
      return this.$store.getters.getUserInfo;
    },
    noMore() {
      //当前页和,和返回的总页面对比
      return this.currentPage >= this.pages;
    },
    disabled() {
      //当两个都为真的时候不加载,页面滚动失效
      return this.loading || this.noMore;
    },
  },
  destroyed() {
    this.$store.commit("init");
  },
};
</script>

<style lang="scss" scoped>
// $rootHeight: 500px;
.news-list {
  margin: 1% 0 0 230px;
  width: 70%;
}
.main {
  margin-bottom: 1%;
  // border: 1px solid red;
}
hr {
  margin: 1% 0 0 0;
}
.info {
  font: 12px/1.5 "Microsoft YaHei", tahoma, arial, "Hiragino Sans GB",
    "\5b8b\4f53", sans-serif;
  margin: 0;
  box-sizing: border-box;
  padding: 3px 0;
  display: inline-block;
  color: #aeaeae;
  text-indent: 1em;
}
</style>